<template>
  <div>
    <!-- 头像 -->

    <!-- 登录页面 -->

    <div class="touxiang">
      <img src="../assets/touxiang.jpeg" width="50" alt />
      <!-- 退出按钮 -->
          <button class="btn" v-if="pShow=='false'" @click="del()">X</button>
      <van-cell is-link @click="showPopup">
        <div class="login" @click="login(1)">
          <p v-if="pShow=='true'">{{user}}</p>
          <p v-if="pShow=='false'">{{user}}</p>
          
        </div>
      </van-cell>
    </div>

    <van-popup v-model="show">
      <van-form class="block" @submit="onSubmit">
        <van-field
          v-model="username"
          name="name"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" class="ti" native-type="submit">登录/注册</van-button>
        </div>
      </van-form>
    </van-popup>

    <!-- 遍历数据 -->
    <van-grid :column-num="3">
      <van-grid-item @click="fun()" icon="label-o" text="我的订单" />
      <van-grid-item @click="fun()" icon="bill-o" text="优惠券" />
      <van-grid-item @click="fun()" icon="goods-collect-o" text="礼品卡" />
      <van-grid-item @click="fun()" icon="location-o" text="我的收藏" />
      <van-grid-item @click="fun()" icon="flag-o" text="我的足迹" />
      <van-grid-item @click="fun()" icon="contact" text="会员福利" />
      <van-grid-item @click="fun()" icon="aim" text="地址管理" />
      <van-grid-item @click="fun()" icon="warn-o" text="账号安全" />
      <van-grid-item @click="fun()" icon="service-o" text="联系客服" />
      <van-grid-item @click="fun()" icon="question-o" text="帮助中心" />
      <van-grid-item @click="fun()" icon="smile-comment-o" text="意见反馈" />
    </van-grid>
  </div>
</template>

<script>
import { Toast } from "vant";
import { GetUser } from "@/request/api.js";
export default {
  data() {
    return {
      isShow: "0",
      show: false,
      username: "",
      user: "点击登录",
      password: "",
      name: "",
      token: "",
      pShow: "true"
    };
  },
  methods: {
    fun() {
      Toast("该功能暂未开放");
    },
    // 点击显示登录页面
    login(a) {
      this.isShow = a;
      this.show = !this.show;
    },
    showPopup() {
      this.show = true;
    },
    // 登录按钮
    onSubmit(values) {
      // console.log("submit", values);
      // console.log(values.name);
      // console.log(values.password);
      GetUser({ username: values.name, pwd: values.password }).then(res => {
        // 如果登录了  就把token和用户名存到token里
        if (res.errno == 0) {
          this.token = res.data.token;
          localStorage.setItem("token", this.token);
          localStorage.setItem("username", values.name);
          // console.log(values.name);
        }
        // 刷新页面
        this.$router.go(0);
      });
    },
    del() {
      Toast("已退出");
      localStorage.removeItem("token");
      localStorage.removeItem("username");
      // 刷新页面
      this.$router.go(0);
    }
  },
  components: {},
  // 生命周期
  created() {
    // 获取token值和用户名
    let token1 = localStorage.getItem("token");
    let user1 = localStorage.getItem("username");
    // 如果有token，页面就是登录状态，要保持当前用户名，退出的存在
    if (token1) {
      // 登录表单消失
      this.show = false;
      // 用户名切换
      this.pShow = "false";
      // 用户名
      this.user = user1;
    }
  }
};
</script>

<style lang='less'  scoped>
// 头像
.touxiang {
  display: flex;
  align-items: center;
  background-color: #333333;
  padding: 0.2667rem;
}
.login {
  color: #333;
  background-color: #333;
  font-size: 0.19rem;
  p:nth-child(1) {
    display: inline-block;
    color: rgb(255, 255, 255);
    float: left;
    display: inline-block;
  }
}
.van-cell {
  background-color: #333;
  color: #333;
}
.van-field {
  background-color: #fff;
}
// 遍历数据
.van-grid-item {
  height: 1.3rem;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-top: -0.5667rem;
}

.block {
  width: 320px;
  height: 200px;
  background-color: #fff;
  padding-top: 0.4333rem;
}
.ti {
  background-color: red;
  border: none;
}
.btn {
  z-index: 99;
  position: absolute;
  // top: 0.4567rem;
  right:0.3533rem;
  border: none;
  background-color: #333333;
  color: #fff;
}
</style>
